<template>
  <page-view class="flex flex-col">
    <title-bar>分类</title-bar>
    <NoticeBar
      scrollable
      left-icon="volume-o"
      text="扫描二维码，有机会领取限时外卖红包"
    />
    <div v-if="isLoading" class="flex justify-center py-[10px]">
      <Loading text-color="#0094ff">正在加载数据···</Loading>
    </div>
    <div v-else class="flex-1 overflow-auto flex flex-row">
      <div class="w-[90px] h-full overflow-auto">
        <Sidebar class="w-full" v-model="selectedIndex" @change="sideBarChange">
          <SidebarItem
            :title="item.category_name"
            v-for="item in allCategoryList"
            :key="item.id"
          ></SidebarItem>
        </Sidebar>
      </div>
      <div class="flex-1 overflow-auto">
        <IndexBar
          :index-list="indexList"
          ref="rightIndexBar"
          :sticky="false"
          @change="indexBarChange"
        >
          <template v-for="(item, index) in allCategoryList" :key="item.id">
            <IndexAnchor :index="index">
              <div class="text-primaryColor text-[18px] font-bold py-3px]">
                {{ item.category_name }}
              </div>
            </IndexAnchor>

            <div
              v-for="f_item in item.foodInfoList"
              :key="f_item.id"
              @click="
                $router.push({ name: 'FoodDetail', params: { id: f_item.id } })
              "
              class="bg-white h-[90px] relative flex flex-row box-border p-[4px] border-0 border-b border-solid border-gray-200"
            >
              <img
                v-lazy="baseURL + f_item.food_img"
                class="w-[110px] h-full"
                alt=""
                @click.stop="showImage(baseURL + f_item.food_img)"
              />
              <ul
                class="flex-1 overflow-auto text-[12px] flex flex-col justify-between ml-[4px]"
              >
                <li class="text-[18px] font-bold">{{ f_item.food_name }}</li>
                <li>价格：{{ f_item.price }}</li>
              </ul>
              <div class="absolute right-[5px] top-[5px] rounded-full p-[2px]">
                <span
                  class="iconfont icon-heart text-[24px] text-red-600"
                ></span>
              </div>
            </div>
            <Empty
              image-size="50px"
              description="当前菜品空前火爆，已售空，明天再来吧"
              v-if="item.foodInfoList.length <= 0"
            ></Empty>
          </template>
        </IndexBar>
      </div>
    </div>
  </page-view>
</template>
<script>
import {
  Sidebar,
  SidebarItem,
  IndexBar,
  IndexAnchor,
  Loading,
  Empty,
  NoticeBar,
} from "vant";
import { Image as VanImage, ImagePreview } from "vant";
import API from "@/utils/API";
export default {
  name: "Category",
  inject: ["baseURL"],
  data() {
    return {
      selectedIndex: 0,
      allCategoryList: [],
      // 表示是否正在请求数据，是否正在加载页面
      isLoading: true,
    };
  },
  computed: {
    indexList() {
      return this.allCategoryList.map((item, index) => {
        return index;
      });
    },
  },
  created() {
    this.getAllCategoryList();
  },
  methods: {
    async getAllCategoryList() {
      let result = await API.categoryInfo.getAllList();
      this.allCategoryList = result;
      this.isLoading = false;
    },
    sideBarChange(index) {
      console.log(index);
      this.$refs.rightIndexBar.scrollTo(index);
    },
    showImage(src) {
      ImagePreview({
        images: [src],
        closeable: true,
      });
    },
    indexBarChange(index) {
      this.selectedIndex = index;
    },
  },
  components: {
    Sidebar,
    SidebarItem,
    IndexBar,
    IndexAnchor,
    Loading,
    Empty,
    VanImage,
    NoticeBar,
  },
};
</script>
<style scoped lang="scss">
:deep(.van-index-bar__sidebar) {
  display: none;
}
</style>
